<template>
  <page-main>
    <template #right>
      <el-button type="primary" icon="plus" @click="handleOperate(refAddEdit,{},'add')">创建运单</el-button>
      <!-- <el-button type="danger" icon="delete" @click="handleDelete(tableData.checkedIds)">批量删除</el-button> -->
      <el-button type="default" icon="download" @click="handleExport('评价','/api/admin/param/export', {})">导出</el-button>
    </template>
    <search-form ref="refSearchForm" @confirm="getList()" />
    <el-table
          v-loading="tableData.loading"
          ref="refTable"
          :data="tableData.list"
          stripe
          border
          style="width: 100%"
          row-key="id"
          :header-cell-style="tableData.headerCellStyle"
          :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
          @selection-change="selectCheckbox"
          >
          <el-table-column type="selection" width="55" align="center" fixed />
          <el-table-column label="序号" type="index" width="80"/>
          <el-table-column label="运单号" prop="publicName" />
          <el-table-column label="运单状态" prop="status">
            <template #default="scope">
              <el-tag size="small">{{proxy.$util.selectName(scope.row.status, optionData.statusType)}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="运单审核" prop="publicKey" />
          <el-table-column label="运单金额（元）" prop="publicValue" />
          <el-table-column label="承运人" prop="publicValue" />
          <el-table-column label="司机" prop="publicValue" />
          <el-table-column label="车牌号" prop="publicValue" />
          <el-table-column label="发货地" prop="publicValue" show-overflow-tooltip />
          <el-table-column label="操作" fixed="right" width="240">
            <template #default="scope">
              <el-button
                size="small"
                icon="document"
                type="primary"
                text
                @click="handleOperate(refShowDetail,scope.row)"
              >详情</el-button> 
              <!-- <el-button
                size="small"
                icon="document"
                type="primary"
                text
                @click="handleOperate(refShowDetail,scope.row)"
              >上传合同</el-button> 
              <el-button
                size="small"
                icon="document"
                type="primary"
                text
                @click="handleOperate(refShowDetail,scope.row)"
              >查看合同</el-button> 
              <el-button
                size="small"
                icon="document"
                type="primary"
                text
                @click="handleOperate(refShowDetail,scope.row)"
              >运单审核</el-button>  -->
              <el-button
                size="small"
                icon="edit-pen"
                type="primary"
                text
                @click="handleOperate(refAddEdit,scope.row,'edit')"
              >编辑</el-button>
              <el-button
                size="small"
                icon="delete"
                type="danger"
                text
                @click="handleDelete(scope.row.id)"
              >撤销</el-button> 
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="pageData.current"
          :page-size="pageData.size"
          :page-sizes="pageData.pageSizes"
          :total="pageData.total"
          background
          style="padding: 30px 0; text-align: center;"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="getList()"
          @size-change="sizeChange"
        />
        <add-edit ref="refAddEdit" name="评价" @confirm="getList(dlgAddEdit.type == 'add'? 1 : pageData.current)"></add-edit> 
        <show-detail ref="refShowDetail" />
  </page-main>
</template>

<script setup lang="ts">
// import {onMounted, ref, reactive, provide,defineAsyncComponent, getCurrentInstance, ComponentInternalInstance} from 'vue';
let obj = {
  pageApi: '/api/admin/param/page',
  deleteApi: '/api/admin/param',
  primaryKey: 'publicId',
  searchFixed:{},
}
import { useList } from '/@/assets/compositionFn/list';
let { dlgAddEdit, tableData, pageData, optionDataStore, getList, sizeChange, selectCheckbox, setDefaultCheckbox, handleOperate, handleDelete, handleExport } = useList(obj);
const SearchForm = defineAsyncComponent(() => import('./components/SearchForm.vue'));
const AddEdit = defineAsyncComponent(() => import('./components/AddEdit.vue'));
const ShowDetail = defineAsyncComponent(() => import('./components/ShowDetail.vue'));
const {proxy} :any = getCurrentInstance() as ComponentInternalInstance;
const refSearchForm = ref();
const refTable = ref();
const refAddEdit = ref();
const refShowDetail = ref();
const optionData:any = reactive({});

provide('optionData', optionData);
const getInitData = async ()=>{
  let dictType = await optionDataStore.getDictList('dict_type');
  let statusType = await optionDataStore.getDictList('status_type');
  optionData.dictType = proxy.$util.transformArray(dictType);
  optionData.statusType = proxy.$util.transformArray(statusType);
};
onMounted(async () => {
  tableData.initIds = ['2','3'];
  await getInitData();
  getList().then(res => {
    setDefaultCheckbox(refTable);
  });
  
})
</script>

<style>

</style>